<template>
	<div class="list">
		<div class="tab">
			<el-table
				:data="tableData"
				border
				style="width: 100%">
				<el-table-column
					type="index"
					label="序号"
					align='center'
					sortable
					width="50">
				</el-table-column>
                <el-table-column
					label="发货单号"
					align='center'
					width="150">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.order }}</span>
					</template>
				</el-table-column>
                <el-table-column
					label="设备ID"
					align='center'
					width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.lable_type }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="货物类型"
					align='center'
					width="80">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="安全温度"
					align='center'
					width="80">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.temp }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="记录间隔"
					align='center'
					width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.interrecord }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="启动延时"
					align='center'
                    width="80">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.time_await }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="开始时间"
					align='center'
                    width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.start_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="结束时间"
					align='center'
                    width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.end_time | end_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="运单状态"
					align='center'
                    width="100">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.type | type }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="温度记录"
					align='center'
                    width="200">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.is_alert | is_alert }}</span>
					</template>
				</el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                    <el-button @click="receive(scope.$index, scope.row)" type="text" size="small">收货</el-button>
                    </template>
                </el-table-column>
			</el-table>
		</div>
		<div class="page">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import{get_order1,receive} from '../../api/api.js'
	export default {
		name:"list",
		data() {
			return {
				tableData:[], //数据
				paginations:{
					page_index:1, //当前页
					total:0, //总数
					page_size:5, //一页显示多少
					page_sizes:[5,10,15,20], //每页显示多少条
					layout:'total, sizes, prev, pager, next, jumper'
				},
                allTableData:[],
                formLabelWidth: '100px',
                id:'',

			}
        },
        filters:{
            type(type){
                if(type==0){
                    return "在途"
                }else{
                    return "完成"
                }
            },
            is_alert(type){
                if(type==0){
                    return "正常"
                }else{
                    return "报警"
                }
            },
            end_time(type){
                if(type==null){
                    return "暂无"
                }
            }

        },
		methods: { 
            receive(index,row){
                var params = {
                    id : row.id,
                    interrecord:row.interrecord,
                    goods_name:row.goods_name,

            };
            receive(params).then(res=>{
                this.$message(res.message)
            })
            },           
			//获取在途运单信息
            get_allorder() {
                var params = {
            };
            get_order1(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                this.setPaginations()
            })
            },
			setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},
		created(){
            this.get_allorder()

		}
	}
</script>

<style scoped>
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
</style>